<template>
  <view class="page-notice">
    <view class="header">
      <view class="title">{{ $t('mine.公告列表') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="notice-list">
      <view class="notice-item" v-for="(item, index) in specialList" :key="index" @click="handleGoActivityDetail(item)">
        <view class="image-wrapper">
          <image :src="`${imgUrl}${item.cover}`" alt="" class="item-img" mode="aspectFit" />
        </view>
        <view class="info">
          <view class="name">{{ item.title }}！</view>
          <view class="tiem">{{ item.createdAt }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import { article } from '@/api/home.js'
  import config from '@/config'

  export default {
    data() {
      return {
        specialList: [],
        imgUrl: config.imgUrl
      }
    },
    onPullDownRefresh() {
      this.getArticle()
      uni.stopPullDownRefresh()
    },
    methods: {
      //返回
      handleBack() {
        // uni.navigateBack()
        this.$tab.switchTab('/pages/mine/index')
      },
      //活动专区
      getArticle() {
        this.$modal.loading('loading', 'loading')
        article()
          .then((res) => {
            this.$modal.closeLoading()
            let { data } = res.result
            this.specialList = data
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      //活动详情
      handleGoActivityDetail(item) {
        this.$tab.navigateTo(`/pages/activity/index?id=${item.id}`)
      }
    },
    created() {
      this.getArticle()
    }
  }
</script>
<style lang="scss" scoped>
  .page-notice {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .notice-list {
      margin: 140rpx 50rpx 0;
      .notice-item {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        .image-wrapper {
          width: 45%;
          height: 200rpx;
          .item-img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          margin-left: 20rpx;
          .name {
            font-size: 28rpx;
          }
          .tiem {
            font-size: 24rpx;
            margin-top: 40rpx;
          }
        }
      }
    }
  }
</style>
